<template>
  <div class="app-container">
    <div class="createOper" v-loading="loading">
      <section class="createOper-progress xh-card">
        <dl class>
          <dt class="xh-card-dt">
            <span class="title">新增模型测算</span>
            <div v-if="finish !== 'wait'">
              <el-popconfirm title="确定要取消测算？" @onConfirm="handleGoBack">
                <el-button style="margin-right: 10px" size="small" slot="reference">取消测算</el-button>
              </el-popconfirm>

              <el-button size="small" v-if="active" :disabled="active === 0" @click="prev">上一步</el-button>
              <el-button size="small" :disabled="active === max" @click="next" v-if="active && active !== max - 1"
                type="primary">下一步</el-button>
              <el-button size="small" v-if="active === max - 1" @click="handleSubmit" type="primary">提交预测</el-button>
            </div>
            <div v-else>
              <el-button size="small" :loading="downLoading" @click="handleDown">下载测算结果</el-button>
              <el-button size="small" @click="handleCope">复制</el-button>
              <el-button size="small" @click="handleGoBack" type="primary">完成</el-button>
              <el-button size="small" @click="handleCreate" type="primary">开始新的测算</el-button>
            </div>
          </dt>
          <dd>
            <el-steps :active="active" :finish-status="finish">
              <el-step title="模型参数设置"></el-step>
              <el-step title="数据预测"></el-step>
              <el-step title="历史数据"></el-step>
              <el-step title="数据预测"></el-step>
              <el-step title="测算结果"></el-step>
            </el-steps>
          </dd>
        </dl>
      </section>

      <section class="createOper-body">
        <div v-if="active === 0" class="operatingrisk-left">

          <Step1 @next="next" ref="step1Ref" :data.sync="formData.step1" />

        </div>

        <dl v-else class="createoper-step-card xh-card">
        <dt class="xh-card-dt">
          <div class="xh-card-dt-left">
          <span class="title">测算输入数据</span>
        
        </div>
        </dt>
        <dd>
        <Step2 v-if="active === 1" @next="next" :isOpenValidate="isOpenValidate" ref="step2Ref"
          :data.sync="formData.step2" />
        <Step3 v-else-if="active === 2" @next="next" ref="step3Ref" :data.sync="formData.step3" />
        <Step4 v-else-if="active === 3" @next="next" ref="step4Ref" :data.sync="formData.step4" />
        <Results v-else-if="active === 4" @next="next" :data.sync="successData" />
</dd>
</dl>
      </section>
    </div>
  </div>
</template>
<script>
import { Step1, Step2, Step3, Step4, Results } from "./components/index";
import { downloadFile } from "@/utils/files";
import { info, getInfoSuccessData } from "./info";

export default {
  name: "",
  components: {
    Step1,
    Step2,
    Step3,
    Step4,
    Results
  },
  data() {
    return {
      active: 0,
      max: 4,
      loading: false,
      finish: "finish",
      isOpenValidate: false, // 是否开启校验
      formData: {
        step1: {},
        step2: {
          // 模拟动态数据
          list: [
            {
              key: "name",
              keyName: "项目名称",
              value: ""
            },
            {
              key: "name",
              keyName: "折现率",
              value: ""
            }
          ]
        }
      },
      successData: undefined,
      loadingSuccess: undefined,
      downLoading: false,
      isView: false
    };
  },
  watch: {
    $route: {
      // $route可以用引号，也可以不用引号
      handler(to, from) {
        console.log("跳转");
        console.log(to);

        this.isView = to.query.view ? true : false;
      },
      deep: true, // 深度观察监听
      immediate: true // 第一次初始化渲染就可以监听到
    }
  },
  computed: {},
  created() {
    this.finish = "finish";
    this.getInfo(1);
  },
  mounted() { },
  methods: {
    prev() {
      // 如果测算完成，禁止回跳
      if (this.finish === "wait") return;
      if (this.active > 0) {
        this.active--;
      }
    },
    async next() {
      // 下一步添加验证，暂定
      const name = `step${this.active + 1}Ref`;
      const refs = this.$refs[name];
      if (refs && refs.validateForm) {
        let errCode = ''
        const isValidate = await refs.validateForm().catch((err) => {
          errCode = err
        });
        if (!isValidate) return this.$message.error('必填信息不能为空');
      }
      if (this.active < this.max) {
        this.active++;
      }
    },
    handleSubmit() {
      this.getSuccessData();
    },

    getInfo() {
      // 初始数据是动态表单，则都需要从后端取，
      // 所以每次直接调用接口，则为新建
      this.loading = true;
      info()
        .then(res => {
          if (this.isView) {
            this.getSuccessData(false);
          } else {
            this.active = 0;
            this.finish = "finish";
            this.loading = false;
          }

          this.formData = res.data;
        })
        .catch(err => {
          this.loading = false;
          console.log(err);
          // 失败无初始数据则返回列表
          this.$message.error("初始化失败");
          this.handleGoBack();
        })
        .finally(() => {

        });
    },
    getSuccessData(status = true) {
      if (status) {
        this.loadingSuccess = this.$loading({
          lock: true,
          text: "正在测算...",
          size: 56,
          customClass: "step-icon-loading",
          spinner: "el-icon-loading ",
          background: "rgba(0, 0, 0, 0.7)"
        });
      }
      getInfoSuccessData().then(res => {
        this.active = this.max;
        this.finish = "wait";
        this.successData = res.data;
        this.loadingSuccess && this.loadingSuccess.close();
        this.loading = false;
      });
    },
    // 新路由
    handleCreate() {
      this.getInfo();
    },
    handleGoBack() {
      this.$router.push("/invest/operatingrisk");
    },
    // 复制，携带id 跳转
    handleCope() {
      if (!this.successData) return this.$message.error("未找到可复制数据");

      this.$router.push("/invest/createOper?id=2");
      this.getInfo();
    },
    handleDown() {
      this.downLoading = true;
      const fileContent = "Hello,你好!";
      const fileName = "测试.xlsx";

      const file = new File([fileContent], fileName);
      downloadFile(file, "测试");
      setTimeout(() => {
        this.$message.success("下载成功，请打开下载文件查看");
        this.downLoading = false;
      }, 1500);
    }
  }
};
</script>
<style lang="scss" scoped>
.createOper {
  &-progress {
    dd {
      padding-right: 150px !important;
    }

    dd {
      padding: 20px;
    }
  }

  &-body {
    margin-top: 20px;

  }
}

.createOper ::v-deep {
  $wd: 32px;

  .el-step__title {
    position: absolute;
    left: 24px;
    top: 0;
    background-color: #fff;
    padding: 0px 15px;
    line-height: $wd;
    white-space: nowrap;
  }

  .el-step__head {
    .el-step__line {
      margin-right: 20px !important;
      height: 1px;
      top: ($wd - 2) / 2;
    }
    &.is-finish{
      .el-step__icon{
        background: #EEF6FD;
      }
    }

    .el-step__icon {
      &.is-text {
        width: $wd;
        height: $wd;
        font-size: 16px;
        font-weight: 300;
      }

      .el-step__icon-inner {
        font-weight: 300;
      }
    }

    &.is-process {
      .el-step__icon {
        &.is-text {
          background-color: var(--base-color);
          border-color: var(--base-color);
          color: #fff;


        }

      }
    }
  }
}
</style>
